<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show/hide/toggle</title>
    <style>
        .c1{
            height: 50px;
            width: 300px;
            font-size: 30px;
            color: #396bb3;
        }
    </style>
</head>
<body>

<div class="c1">hello yuan</div>
    <button class="b1" onclick="f1()">显示</button>
    <button class="b2" onclick="f2()">隐藏</button>
    <button class="b2" onclick="f3()">切换</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    function f1(){
    $(".c1").show(1000)
    }
    function f2(){
    $(".c1").hide(1000)
    }
    function f3(){
    $(".c1").toggle(1000)
    }
</script>
</body>
</html>